<!-- 对比详情 comparisondetails -->
<template>
	<view>
		<view class="heighly">
			<view class="" v-if="data.length">
				<view class="m-mg-lr u-m-t-30">
					<view class="u-flex u-flex-between">
						<view class="boxwidth u-rela">
							<u--image :src="room.image" width='100%' height='246' radius='5'></u--image>
							<view class="u-abso boxbo">
								<text>{{room.name}}</text>
							</view>
						</view>
						<view class="boxwidth u-rela">
							<u--image :src="duibi.image" width='100%' height='246' radius='5'></u--image>
							<view class="u-abso boxbo">
								<text>{{duibi.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-m-t-40">
					<view class="u-flex u-flex-between u-font-22 rowflex u-p-b-20 u-p-t-10 u-border-bottom "
						v-for="(item,index) in data" :key='index' v-if="type == 0">
						<view class="u-m-l-30" :class="index === 0 ? 'c0' : (item.name && index > 0 ? 'c1' : '')"
							style="width: 115rpx;">
							<text>{{item.name}}</text>
						</view>
						<!-- 判断是否为数组 -->
						<view v-if="getwei(item.name1)" class="wid c2 marlef">
							<view class="u-flex u-flex-wrap rowleft" v-for="(it,ind) in item.name1" :key='ind'
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">
								<text class="boxdi">{{it.name}}</text>
							</view>
						</view>
						<view class="wid" v-else :class="index === 0 ? 'c2' : ''">
							<text
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{item.name1}}</text>
						</view>
						<!-- 判断是否为数组 -->
						<view v-if="getwei(item.name2)" class="wid c2 marlef">
							<view class="u-m-r-30 " v-for="(ita,inda) in item.name2" :key='inda'>
								<text
									:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{ita.name}}</text>
							</view>
						</view>
						<view class="u-m-r-30 wid" v-else :class="index === 0 ? 'c2' : ''">
							<text
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{item.name2}}</text>
						</view>
					</view>
					
					<!-- 123322123132132132 -->
					<view class="u-flex u-flex-between u-font-22 rowflex u-p-b-20 u-p-t-10 u-border-bottom "
						v-for="(item,index) in data" :key='index' v-if="type == 1 && index != 1 && index != 2 && index != 8 && index != 9 && index != 10">
						<view class="u-m-l-30" :class="index === 0 ? 'c0' : (item.name && index > 0 ? 'c1' : '')"
							style="width: 115rpx;">
							<text>{{item.name}}</text>
						</view>
						<!-- 判断是否为数组 -->
						<view v-if="getwei(item.name1)" class="wid c2 marlef">
							<view class="u-flex u-flex-wrap rowleft" v-for="(it,ind) in item.name1" :key='ind'
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">
								<text class="boxdi">{{it.name}}</text>
							</view>
						</view>
						<view class="wid" v-else :class="index === 0 ? 'c2' : ''">
							<text
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{item.name1}}</text>
						</view>
						<!-- 判断是否为数组 -->
						<view v-if="getwei(item.name2)" class="wid c2 marlef">
							<view class="u-m-r-30 " v-for="(ita,inda) in item.name2" :key='inda'>
								<text
									:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{ita.name}}</text>
							</view>
						</view>
						<view class="u-m-r-30 wid" v-else :class="index === 0 ? 'c2' : ''">
							<text
								:class="index === 0 ? 'c1' : (item.name && index > 0 ? 'c2' : ((item.name1 || item.name2)&& index > 0 ? 'c3' : ''))">{{item.name2}}</text>
						</view>
					</view>
				</view>
				<view style="height: 60rpx;"></view>
			</view>
			<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="highly  "></list-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				room: {},
				duibi: {},
				data: [],
				type:0
			};
		},
		onLoad(e) {
			//#ifdef MP-WEIXIN
			uni.hideShareMenu();
			// #endif
			try {
				if (e.type) {
					this.type = +e.type;
				}
				let ho = uni.getStorageSync('duibi');
				if (!ho) return
				let duibi = JSON.parse(ho);
				if (duibi) {
					this.room = duibi[0];
					this.duibi = duibi[1];
					if (this.type == 1) {
						this.room.image = duibi[0].images.split(',')[0];
						this.duibi.image = duibi[1].images.split(',')[0];
					}
				}
			} catch (e) {}
			let a = 1;
			// if(this.room.pricemax && this.duibi.pricemax){
			// 	let pricemax = this.get_look_two(this.room.pricemax);
			// 	let pricemaxs = this.get_look_two(this.duibi.pricemax);
			// 	a = 2
			// }
			let prices = this.get_look_two(+this.duibi.price);
			let price = this.get_look_two(+this.room.price);
			this.data = [{
					name: '基本信息',
					name1: this.room.name || this.room.properties_name,
					name2: this.duibi.name || this.duibi.properties_name
				},
				{
					name: '楼盘售价:',
					name1: this.room.aveprice ? this.get_look_two(+this.room.aveprice) + '-' + this.get_look_two(+this
						.room.avepricemax) : '',
					name2: this.duibi.aveprice ? this.get_look_two(+this.duibi.aveprice) + '-' + this.get_look_two(+
						this
						.duibi.avepricemax) : ''
				},
				{
					name: '楼盘特色:',
					name1: this.room.characteristic || '',
					name2: this.duibi.characteristic || ''
				},
				{
					name: '楼盘总价:',
					name1: this.room.pricemax ? price + '万元-' + this.room.pricemax + '万元' : price + '万元',
					name2: this.duibi.pricemax ? prices + '万元-' + this.duibi.pricemax + '万元' : prices + '万元'
				},
				{
					name: '产权年限:',
					name1: this.room.years ? this.room.years + '年' : (this.room.year ? this.room.year + '年' : ''),
					name2: this.duibi.years ? this.duibi.years + '年' : (this.duibi.year ? this.duibi.year + '年' : '')
				},
				{
					name: '所在地区:',
					name1: this.room.city ? this.room.city + this.room.areaname : '',
					name2: this.duibi.city ? this.duibi.city + this.duibi.areaname : ''
				},
				{
					name: '物业类型:',
					name1: this.room.companytype || this.room.roomnature,
					name2: this.duibi.companytype || this.duibi.roomnature
				},
				{
					name: '楼盘地址:',
					name1: this.room.address || '',
					name2: this.duibi.address || ''
				},
				{
					name: '建筑类型:',
					name1: this.room.buildingtype || '',
					name2: this.duibi.buildingtype || ''
				},
				{
					name: '品牌商:',
					name1: this.room.developers || '',
					name2: this.duibi.developers || ''
				},
				{
					name: '物业公司:',
					name1: this.room.company || '',
					name2: this.duibi.company || ''
				}
			]
			if (e.type == 1) {}
		},
		computed: {
			getwei() {
				return val => {
					if (typeof(val) === 'object') {
						return true;
					} else {
						return false
					}
				};
			}
		},
		onHide() {
			uni.removeStorageSync('对比');
		},
	}
</script>

<style lang="scss" scoped>
	.boxwidth {
		width: 48%;
	}

	.boxdi {
		display: inline-flex;
		flex: 1
	}

	.wid {
		width: 32%;
	}

	.c1 {
		color: #211F20;
	}

	.c2 {
		color: #5F5E5F;
	}

	.marlef {
		margin-left: -15rpx;
	}

	.c3 {
		color: #B9B9B9;
	}

	.boxbo {
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #DBB07B;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.rowflex {
		align-items: center;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
